<template>
    <el-dialog
        title="角色权限设置"
        v-model="state.visible"
        :width="500"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-tabs tab-position="top">
            <el-tab-pane label="菜单权限">
                <div class="treeMain">
                    <el-tree
                        ref="menuRef"
                        node-key="id"
                        :data="state.menu.list"
                        :props="state.menu.props"
                        show-checkbox
                    ></el-tree>
                </div>
            </el-tab-pane>
            <el-tab-pane label="数据权限" disabled>
                <el-form label-width="100px" label-position="left">
                    <el-form-item label="规则类型">
                        <el-select v-model="state.data.dataType" placeholder="请选择">
                            <el-option label="全部可见" value="1"></el-option>
                            <el-option label="本人可见" value="2"></el-option>
                            <el-option label="所在部门可见" value="3"></el-option>
                            <el-option label="所在部门及子级可见" value="4"></el-option>
                            <el-option label="选择的部门可见" value="5"></el-option>
                            <el-option label="自定义" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择部门" v-show="state.data.dataType == '5'">
                        <div class="treeMain" style="width: 100%">
                            <el-tree
                                ref="deptRef"
                                node-key="id"
                                :data="state.data.list"
                                :props="state.data.props"
                                show-checkbox
                            ></el-tree>
                        </div>
                    </el-form-item>
                    <el-form-item label="规则值" v-show="state.data.dataType == '6'">
                        <el-input
                            v-model="state.data.rule"
                            clearable
                            type="textarea"
                            :rows="6"
                            placeholder="请输入自定义规则代码"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="控制台模块" disabled>
                <div class="treeMain">
                    <el-tree
                        ref="grid"
                        node-key="key"
                        :data="state.grid.list"
                        :props="state.grid.props"
                        :default-checked-keys="state.grid.checked"
                        show-checkbox
                    ></el-tree>
                </div>
            </el-tab-pane>
            <el-tab-pane label="控制台" disabled>
                <el-form label-width="100px" label-position="left">
                    <el-form-item label="控制台视图">
                        <el-select v-model="state.dashboard" placeholder="请选择">
                            <el-option
                                v-for="item in state.dashboardOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: #8492a6; font-size: 12px">{{
                                    item.views
                                }}</span>
                            </el-option>
                        </el-select>
                        <div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <el-button @click="state.visible = false">取 消</el-button>
            <el-button type="primary" :loading="state.isSaving" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import setting from '@/api/modules/setting.ts'

const menuRef = ref()
const deptRef = ref()

const emit = defineEmits(['success', 'closed'])

const state = reactive({
    visible: false,
    isSaving: false,
    menu: {
        list: [],
        checked: [],
        props: {
            label: (data: any) => {
                return data.name
            }
        }
    },
    grid: {
        list: [] as any,
        checked: ['welcome', 'ver', 'time', 'progress', 'echarts', 'about'],
        props: {
            label: (data: any) => {
                return data.title
            },
            disabled: (data: any) => {
                return data.isFixed
            }
        }
    },
    data: {
        dataType: '1',
        list: [],
        checked: [] as any,
        props: {},
        rule: ''
    },
    dashboard: '0',
    dashboardOptions: [
        {
            value: '0',
            label: '数据统计',
            views: 'stats'
        },
        {
            value: '1',
            label: '工作台',
            views: 'work'
        }
    ],
    row: {} as any
})

onMounted(() => {
    getDept()
    getGrid()
})

defineExpose({
    open
})

function open(row: any) {
    state.row = row
    state.visible = true
    getMenu()
}

async function submit() {
    state.isSaving = true

    // 选中的和半选的合并后传值接口
    state.row.menuIds = menuRef.value!.getCheckedKeys().concat(menuRef.value!.getHalfCheckedKeys())

    emit('success', state.row)

    state.isSaving = false
    state.visible = false
}

async function getMenu() {
    const res = await setting.role.getRoleMenuIds.get({ roleId: state.row.id }, { await: 1 })
    if (!res) {
        emit('closed')
        return
    }

    state.menu.list = res.menu
    state.menu.checked = res.checked

    // 获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
    await nextTick(() => {
        const filterKeys = state.menu.checked.filter(
            (key: any) => menuRef.value!.getNode(key) && menuRef.value!.getNode(key).isLeaf
        )
        menuRef.value!.setCheckedKeys(filterKeys, true)
    })
}

async function getDept() {
    // state.data.list = await setting.dept.list.get()
    // console.log(state.data.list, 'state.data.list')
    // await nextTick(() => {
    //     const filterKeys = state.data.checked.filter(
    //         (key: any) => deptRef.value!.getNode(key).isLeaf
    //     )
    //     deptRef.value!.setCheckedKeys(filterKeys, true)
    // })
}

function getGrid() {
    state.grid.list = [
        {
            key: 'welcome',
            title: '欢迎',
            isFixed: true
        },
        {
            key: 'ver',
            title: '版本信息',
            isFixed: true
        },
        {
            key: 'time',
            title: '时钟'
        },
        {
            key: 'progress',
            title: '进度环'
        },
        {
            key: 'echarts',
            title: '实时收入'
        },
        {
            key: 'about',
            title: '关于项目'
        }
    ]
}
</script>

<style scoped>
.treeMain {
    height: 280px;
    overflow: auto;
    border: 1px solid #dcdfe6;
    margin-bottom: 10px;
}
</style>
